<template>
  <div
    class="chat-pc layout-bg chat-pc-new"
    :class="classObj"
    v-loading="loading"
  >
    <div class="flex-row">
      <HistoryChatList 
        :isCollapse="isCollapse" 
        :agentId="agentId"
        @handelItem="handelChatItem"
        @handelDelItem="handelDelChatItem"
        @handelCollapse="handelCollapse"
      />
      <div class="right">
        <div class="right-height chat-width">
          <ChatBox />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import useStore from '@/stores'
import useResize from '@/layout/hooks/useResize'
import HistoryChatList from './HistoryChatList.vue'
import ChatBox from './ChatBox.vue'

useResize()

const { common } = useStore()
const isCollapse = ref(true)


const classObj = computed(() => {
  return {
    mobile: common.isMobile(),
    hideLeft: !isCollapse.value,
  }
})

defineProps<{
  agentId: any // 智能体id
}>()


const loading = ref(false)


function handelChatItem(item:any) {
  console.log(item)
}

function handelDelChatItem(item:any) {
  console.log(item)
}

function handelCollapse(val: any){
  isCollapse.value = val
}


onMounted(() => {

})
</script>

<style lang="scss">
@import "./index.scss";
</style>
